import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import Menu from '@/components/Menu';

const { Header, Content, Footer, Sider } = Layout;


const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左侧侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo" />
        <Menu />
      </Sider>
      {/* 右侧内容区 */}
      <Layout className="site-layout">
        {/* 内容区 - 头部 */}
        <Header className="site-layout-background" style={{ paddingLeft: 16 }}>
          <Breadcrumb style={{ margin: '0', lineHeight: '64px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        {/* 内容区 - 主体 */}
        <Content className="site-layout-background" style={{ margin: '16px 16px 0' }}>
          <Outlet />
        </Content>
        {/* 内容区 - 底部 */}
        <Footer style={{ textAlign: 'center', padding: 0, lineHeight: '48px' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default App;